<template>
<div class="father">
        <div class="back" @click="push">
        <img src="@/assets/img/返回.png" alt="" />
        <span style="font-size:35px;">批改作业</span>
      </div>
    <div class="son01">
         <h3 style="font-size:26px">学生姓名：{{taskManager.studentName}}</h3>
    <div style="margin-top: 30px;">
        <p class="biaoti">作业题目：
            <span>{{taskManager.taskName}}</span>
        </p>
        <div class="daan">作业答案：
            <div v-html="taskManager.taskTxt "></div>
        </div>
       
    </div>
    <div>
        <el-form :model="pingyu" ref="numberValidateFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item
            label="评分："
            prop="score"
            :rules="[
              { required: true, message: '评分不能为空' },
              { type: 'number', message: '评分必须为数字值' }
            ]"
          >
            <el-input v-model.number="pingyu.score" autocomplete="off" placeholder="请输入评分"></el-input>
          </el-form-item>
          <el-form-item label="评语：">
            <el-input v-model="pingyu.comment" placeholder="请输入评语" type="textarea" :rows="4"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button class="submit-btn" type="primary" @click="handleSubmit">提交</el-button>
    </div>
</div>
</template>
<script setup>
import { ref, reactive,onMounted } from 'vue'
// 引入路由
import { useRouter, useRoute } from 'vue-router'
import  {selecttaskManagerByid} from "@/api/teacher/taskManager.js";
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
// 创建路由实例
const router = useRouter()
// 获取当前路由对象
const route = useRoute()
//返回上一页
const push = () => {
  router.push("/class/homework");
};
//查询的信息对象
const taskManager=ref({})
const selectOne=()=>{
    selecttaskManagerByid(9).then(res=>{
        console.log(res.data)
        taskManager.value=res.data;
    })
}
//==================================
const pingyu=ref({})

const numberValidateFormRef = ref(null);

const handleSubmit = () => {
  numberValidateFormRef.value.validate((valid) => {
    if (valid) {
      // 提交逻辑
      ElMessage.success('提交成功')
      // 提交数据到后端的逻辑
      // ...
    } else {
      ElMessage.error('验证失败,请检查输入信息')
      return false
    }
  })
}



onMounted(()=>{
    console.log(route.query.userId)
    selectOne();
})
</script>


<style lang='scss' scoped>
$fz-base: 16px;
$fz-title: 26px;
$fz-small: 14px;
$color-primary: #409EFF;
$color-secondary: #606266;
$color-background: #FFFFFF;
$color-border: #DCDFE6;

.father {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background-color: $color-background;
  padding: 20px;
}

.son01 {
  margin: 0 auto;
  width: 80%;
  max-width: 1200px;
  background-color: $color-background;
  margin-top: 50px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.back {
  width: fit-content;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

  span {
    font-size: $fz-title;
    color: $color-primary;
  }
}

.biaoti, .daan {
  border: 1px solid $color-border;
  margin-top: 20px;
  font-size: $fz-base;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.daan p {
  margin: 0;
  font-weight: bold;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  margin-top: 10px;
}

.submit-btn {
  width: 100px;
  height: 35px;
  margin-top: 40px;
  background-color: $color-primary;
  color: $color-background;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: $fz-base;
  margin-left: 650px;
  &:hover {
    background-color: darken($color-primary, 10%);
  }
}

@media (max-width: 768px) {
  .son01 {
    width: 90%;
  }

  .back {
    flex-direction: column;
    align-items: flex-start;

    img {
      margin-right: 0;
      margin-bottom: 10px;
    }
  }
}
</style>